<template>
  <section class="course-task-item">
    <div class="header">
      <el-page-header @back="() => this.$router.back()" :content="content.title"/>
      <el-button type="primary" icon="el-icon-plus" @click="handleEditLession(data)">添加课时</el-button>
    </div>

    <el-table :data="lessons" v-loading="loading" element-loading-text="数据加载中...">
      <el-table-column prop="id" label="ID" width="230"></el-table-column>
      <el-table-column prop="theme" label="课时名称"></el-table-column>
      <el-table-column prop="duration" label="时长" align="center" width="180"></el-table-column>
      <el-table-column label="操作" align="center" width="200">
        <template slot-scope="scope">
          <el-button size="small">上传视频</el-button>
          <el-button size="small" @click="handleEditLession(scope.row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 添加课时-对话框 -->
    <el-dialog class="toggle-dialog" title="添加课时" :visible.sync="showAddLession" width="50%">
      <el-form label-position="right" label-width="110px">
        <el-form-item label="课程名称" prop="course_name">
          <el-input v-model="addLessionForm.course_name" disabled></el-input>
        </el-form-item>
        <el-form-item label="章节名称" prop="section_name">
          <el-input v-model="addLessionForm.section_name" disabled></el-input>
        </el-form-item>
        <el-form-item label="课时名称" prop="theme">
          <el-input v-model="addLessionForm.theme"></el-input>
        </el-form-item>
        <el-form-item label="时长" prop="duration">
          <el-input v-model="addLessionForm.duration" type="number"></el-input>
        </el-form-item>
        <el-form-item label="是否开放试听" prop="duration">
          <el-radio-group v-model="addLessionForm.is_free">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="课时排序" prop="order_num">
          <el-input v-model="addLessionForm.order_num" type="number">
            <template slot="append">数字控制排序，数字越大越靠后</template>
          </el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="showAddLession = false">取 消</el-button>
        <el-button type="primary" @click="addLession">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 修改章节状态 -->
  </section>
</template>

<script>
//引入axios
import { axios } from "../utils";
export default {
  name: "CourseTaskItem",
  title: "课时配置",
  data() {
    //课时信息
    const addLessionForm = {
      id: undefined,
      course_id: undefined,
      course_name: "",
      section_id: undefined,
      section_name: "",
      theme: "",
      duration: "",
      is_free: 0,
      order_num: 0,
      status: 0
    };
    return {
      addLessionForm,
      content: {},
      lessons: [],
      loading: true,
      showAddLession: false //添加课时
    };
  },
  created() {
    //const { courseId, taskId } = this.$route.params;
    const { tasks } = this.$route.params;
    this.$breadcrumbs = [
      { name: "Courses", text: "课程管理" },
      {
        name: "CourseTasks",
        params: { courseId: tasks.course_id },
        text: "课程结构"
      },
      { text: "课时配置" }
    ];
    this.lessons = tasks.lessonList;
    this.content = tasks;
    this.loading = false;
    // this.loadData(courseId, taskId);
  },
  methods: {
    loadData(courseId, taskId) {
      this.loading = true;
      const params = {};
      params.course_id = courseId;
      params.parent_id = taskId;

      Promise.all([
        this.$services.content.get(taskId),
        this.$services.content.get({ params })
      ])
        .then(([res1, res2]) => {
          this.loading = false;
          this.content = res1.data;
          this.lessons = res2.data;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    handleEditLession(data) {
      this.showAddLession = true;
      //添加
      if (!data) {
        //data代表的章节这个表的字段
        this.addLessionForm.course_id = this.content.course_id;
        this.addLessionForm.course_name = this.content.course_name;
        this.addLessionForm.section_id = this.content.id;
        this.addLessionForm.section_name = this.content.section_name;
      } else {
        this.addLessionForm.id = data.id; //data代表课时这个表的字段
        this.addLessionForm.course_id = data.course_id;
        this.addLessionForm.course_name = this.content.course_name;
        this.addLessionForm.section_id = data.section_id;
        this.addLessionForm.section_name = this.content.section_name;
        this.addLessionForm.theme = data.theme;
        this.addLessionForm.duration = data.duration;
        this.addLessionForm.order_num = data.order_num;
        this.addLessionForm.is_free = data.is_free;
      }
    },
    addLession() {
      let that = this;
      axios
        .post("/courseContent", {
          methodName: "saveOrUpdateLesson",
          lesson: that.addLessionForm
        })
        .then(resp => {
          //debugger
          that.showAddLession = false;
          this.$router.back();
        })
        .then(() => {
          // reset 重置表单
          that.addLessionForm.theme = "";
          that.addLessionForm.duration = 0;
          that.addLessionForm.is_free = false;
          that.addLessionForm.order_num = 0;
        })
        .catch(error => {
          this.showAddLession = false;
          this.$message.error("操作执行失败！！！");
        });
    }
  }
};
</script>

<style lang="scss">
.course-task-item {
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .el-table {
    margin-top: 20px;
  }
}
</style>
